<template>
	<view class="videopage">
		<headnav title='推荐视频' :showMenu='false' :bgc="'#f1f1f1'"></headnav>
		<loading v-if="!tog"></loading>
		<container v-else>

			<!-- #ifdef MP-WEIXIN -->
			<view style="text-align: center;"> <text class="text-gray text-bold">此处下拉刷新</text></view>
			<!-- #endif -->

			<view style="display: flex;flex-direction: column;align-items: center; justify-content: space-around;">
				<eachvideo :data='n.data' @closeothers="closeothers" v-for="(n,i) in vlist" :key="n.data.vid" style="margin: 25rpx;"
				 :id="'yjr'+n.data.vid" ref="videos"></eachvideo>
			</view>
			<view style="text-align: center;margin-bottom: 15rpx;">
				<loading :textSize="13"></loading>
			</view>
		</container>

		<view class="backtotop sd" @tap="scrolltotop" v-if="totoptog" :style="{bottom: bottom+'px'}">
			<image src="../../static/top.png"></image>
		</view>

		<!-- #ifdef H5 -->
		<view class="backtotop sd" @tap="backtoplaying" v-if="totoptog" :style="{bottom: bottom+50+'px'}">
			<image src="../../static/backvideo.png"></image>
		</view>
		<!-- #endif -->


	</view>
</template>

<script>
	import {
		getvideo
	} from '../../common/api.js'
	import eachvideo from '../../components/video/video.vue'
	import headnav from '../../components/headNav/headNav.vue'
	import container from '../../components/container/container.vue'
	export default {
		components: {
			headnav,
			container,
			eachvideo
		},
		data() {
			return {
				page: 1,
				vlist: [],
				tog: false,
				cookie: '',
				totoptog: false,
				bottom: 0
			}
		},
		onLoad() {

			// #ifdef H5
			this.bottom = uni.getSystemInfoSync().windowBottom + 20
			// #endif

			// #ifdef MP-WEIXIN
			this.bottom = 20
			// uni.$on('refreshvideo', (e) => {
			// 	this.$emit('yjr-refreshend', 1)
			// 	this.$store.commit('setplayingvideo', undefined)
			// 	this.page = 1
			// 	this.vlist = []
			// 	getvideo(this.cookie, this.offset, 1).then(res => {
			// 		this.vlist = res.data.datas.filter(v => v.data.alg == "newhotc")
			// 	})
			// })
			// #endif


			uni.$on('showbacktotop', (e) => {
				this.totoptog = e
			})

			uni.$on('loadmorevideo', () => {
				this.page++
				getvideo(this.cookie, this.offset).then(res => {
					let newvlist = res.data.datas.filter(v => v.data.alg == "newhotc")
					this.vlist = this.vlist.concat(newvlist)
				})
			})
			this.cookie = encodeURIComponent(JSON.parse(uni.getStorageSync('userinfo')).cookie)
			getvideo(this.cookie, this.offset).then(res => {
				this.tog = true
				console.log(res)
				this.vlist = res.data.datas.filter(v => v.data.alg == "newhotc")
			})
		},
		onPullDownRefresh() {
			this.$store.commit('setplayingvideo', undefined)
			this.page = 1
			this.vlist = []
			getvideo(this.cookie, this.offset, 1).then(res => {
				this.vlist = res.data.datas.filter(v => v.data.alg == "newhotc")
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			closeothers(id) {
				let rs = this.$refs.videos
				let playing = rs.filter(v => v.url != '')
				if (playing.length) {
					playing[0].url = ''
					playing[0].loadtog = false
				}
			},
			scrolltotop() {
				uni.$emit('backtop', 1)
			},
			backtoplaying() {
				if (!this.$store.state.playingvideo) {
					uni.showToast({
						title: "没有预览视频哦",
						icon: 'none'
					})
				} else {
					uni.$emit('backvideo', 1)
				}
			}
		},
		computed: {
			offset() {
				return (this.page - 1) * 8
			}
		}
	}
</script>

<style lang="scss">
	.videopage {
		.backtotop {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			z-index: 10;
			position: fixed;
			right: 20rpx;
			background: white;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
